<template>
  <div class="page flex-col">
    <div class="vertical-scroller">
      <div class="scroller-content">
        <div v-for="item in constructionNotice" :key="item.content" class="scroller-item">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import {
  queryBiddingInfo, queryProjecAmounttInfo, queryProjecDocumentInfo, queryBidSectionByName,
  queryMatCategory, queryselfBuyingMatSupervision, queryReceiveGoodsQualifiedStatistics,
  queryMaterialSupplyStatistics, queryCheckPriceStatistics, queryConstructionNotice
} from "@/utils/api"
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
        // 更多项...
      ],
      constants: {},

      biddingInfo: {
        bddingSupplierCount: 20,
        winningSupplierCount: 20,
        noStartedCount: 20,
        progressCount: 20,
        completedCount: 20
      },
      projecAmounttInfo: {
        "contractAmount": 100,    	// 合同金额
        "planAmount": 50, 		 	// 计划金额
        "demandAmount": 30,     	// 需求金额
        "supplyAmount": 20,       	// 供应金额
        "deliveryCount": 18,  		// 到货金额
        "acceptanceAmount": 16,  	// 验收金额
        "settlementAmount": 12,   	// 结算金额
        "checkPriceAmount": 10,   	// 验工计价金额
        "completeBiddingPrice": 100,	// 完成招标概算价
        "bidPrice": 100,   			// 投标报价
        "noBiddingPrice": 100,   	// 未招标概算价
        "progressBiddingPrice": 100	// 招标进行中概算价
      },
      documentInfo: {
        "noticeCount": 20,  			// 通知数量
        "regulationsCount": 12, 		// 规章制度数量
        "reportCount": 2,    			// 报告数量
        "requestCount": 4        		// 请示数量
      },

      bidSectionByName: {
        "bidSectionName": 20,  					// 标段名称
        "bidState": 12, 							// 招标状态
        "contractProportion": "100%",   			// 合同占比
        "annualDemandProportion": "80%",   	// 年度需求占比
        "monthlyDemandProportion": "50%",   	// 月度需求占比
        "deliveryProportion": "90%",   			// 到货占比
        "acceptanceProportion": "90%",   		// 验收占比
        "checkPriceProportion": "80%"       		// 验工计价占比

      },
      matCategory: {
        "materialsCount": 20,  		// 材料数量
        "equipmentCount": 12, 		// 设备数量
        "sparePartsCount": 22,        // 备品备件数量
        "toolsCount": 34          	// 工器具数量
      },
      selfBuyingMatSupervision: {
        "selfBuyingMatCount": 20,  		// 重要自购物资数量
        "annualPurchasePlanCount": 12, 	// 年度采购计划数量
        "biddingSupervisionCount": 22,   // 公开招标监督数量
        "contractFilingCount": 34         // 合同核备数量

      },
      receiveGoodsQualifiedStatistics: {
        "deliveryQualifiedRate": 20,  			// 到货合格率
        "acceptanceQualificationRate": 12 	// 验收合格率

      },
      materialSupplyStatistics: {
        "dispatchedProportion": "70%",  			// 已发货
        "noDispatchedProportion": "30%", 		// 未发货
        "receivedGoodsProportion": "80%",  		// 已收货
        "noReceivedGoodsProportion": "20%" 	// 未收货

      },
      CheckPriceStatistics: {
        "thisYearFirstQuarter": 30,  			// 本年第一季度数量
        "thisYearFirstQuarter": 35, 			// 本年第二季度数量
        "thisYearFirstQuarter": 32,  			// 本年第三季度数量
        "thisYearFirstQuarter": 40, 			// 本年第四季度数量
        "cumulativeFirstQuarter": 80,  		// 开累第一季度数量
        "cumulativeFirstQuarter": 75, 			// 开累第二季度数量
        "cumulativeFirstQuarter": 78,  		// 开累第三季度数量
        "cumulativeFirstQuarter": 85 			// 开累第四季度数量

      },
      constructionNotice: {
        
      }
    };
  },

  mounted() {
    this.queryGetApi();
    this.handleClick('中交二航局CJZQ-6标')

  },

  methods: {
    async handleClick(val) {
      const json = {
        bidSectionName: JSON.stringify(val)
      }

      this.bidSectionByName = await queryBidSectionByName(json);
      this.matCategory = await queryMatCategory(json);
      this.selfBuyingMatSupervision = await queryselfBuyingMatSupervision(json);
      this.receiveGoodsQualifiedStatistics = await queryReceiveGoodsQualifiedStatistics(json);
      this.materialSupplyStatistics = await queryMaterialSupplyStatistics(json);

      this.CheckPriceStatistics = await queryCheckPriceStatistics(json);

      this.constructionNotice = await queryConstructionNotice(json);

      //    queryBidSectionByName, 
      // queryMatCategory, queryselfBuyingMatSupervision, queryReceiveGoodsQualifiedStatistics,
      // queryMaterialSupplyStatistics, queryCheckPriceStatistics, queryConstructionNotice
    },



    async queryGetApi() {
      this.biddingInfo = await queryBiddingInfo();
      console.log(this.biddingInfo)
      this.projecAmounttInfo = await queryProjecAmounttInfo();
      this.documentInfo = await queryProjecDocumentInfo();
    }
  },
};
</script>

<style scoped lang="scss">
.vertical-scroller {
  height: 1.15vw; /* 设置容器高度 */
  overflow-y: hidden; /* 隐藏Y轴的滚动条 */
  position: relative; /* 定位容器 */
}
.scroller-item{
  height: 1.15vw;
}
.scroller-content {
  position: absolute; /* 绝对定位内容 */
  width: 100%; /* 与容器同宽 */
  animation: scroll 10s linear infinite; /* 应用动画 */
}
@keyframes scroll {
  0% { transform: translateY(0); } /* 开始位置 */
  100% { transform: translateY(-100%); } /* 结束位置，此处需根据实际内容高度调整 */
}
</style>